<template>
	<view class="order">
		<view class="address" v-if="name">
			<view class="address_title">{{ address }}</view>
			<view class="address_name">
				<text>{{ name }}</text>
				<text>{{ telNumber | handler }}</text>
			</view>
		</view>
		<view class="site" v-else><view class="site_title" @click="select">选择地址</view></view>
		<view class="goods">已选商品</view>
		<view class="list" v-for="(item, index) in payList" :key="index">
			<view class="left"><image :src="item.goods_small_logo" mode="widthFix"></image></view>
			<view class="right">
				<view class="top">{{ item.goods_name }}</view>
				<view class="buttom">
					<view class="price">￥{{ item.goods_price }}</view>
					<view class="num">x {{ item.num }}</view>
				</view>
			</view>
		</view>
		<view class="total" :class="{'margin-bottom': isIphoneX ? '20rpx' : ''  }">
			<view class="total_price">
				<text>合计：</text>
				<text class="price">￥{{ totalPrice }}</text>
			</view>
			<view class="total_pay">
				<view :class="name ? 'active pay' : 'pay'" @click="goRegister">去支付({{ totalNum }})</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			payList: [], // 请求回来的数据
			totalPrice: 0, // 总加钱
			totalNum: 0, // 总数量
			address: '', // 用户地址
			name: '', // 用户名字
			telNumber: '' ,// 用户手机号码
			isIphoneX:false // 判断用平台
		};
	},
	 onLoad(e) {
		this.totalPrice = e.price;
		this.totalNum = e.num;
		// 取出储存到本地的值渲染到页面
		const res = uni.getStorageSync('cart');
		console.log(res)
		// 使用filter 过滤已有的数据  返回的是通过检查指定元素的数组
		this.payList = res.filter(item => {
			return item.checked;
		});
		// 获取平台信息 如果是 iPhone XR 就给一个 样式
		const sysInfo = uni.getSystemInfoSync()
		this.isIphoneX = sysInfo.model === 'iPhone XR'
	},
	// onShow 监听页面显示 页面显示
	onShow() {
		const res = uni.getStorageSync('address');
		this.address = res.provinceName + res.cityName + res.countyName + res.detailInfo;
		this.name = res.userName;
		this.telNumber = res.telNumber;
	},
	// 使用过滤器 过滤电话号码
	filters: {
		handler(value) {
			const start = value.substr(0, 3);
			const end = value.substr(7);
			return start + '****' + end;
		}
	},
	methods: {
		// 点击去支付
		async goRegister() {
			// 1 如果没有填地址就提示用户
			// 2 如果没有登录就跳转到登录页
			// 3 否则就发起支付请求
			// 这里需要使用同步才可以 getStorageSync 使用 getStorage 异步会返回一个 Promise
			const token = uni.getStorageSync('token');
			if (!this.address) {
				uni.showToast({
					title: '请先填写收货地址',
					icon: 'none'
				});
			} else if (!token) {
				uni.redirectTo({
					url: '../login/index'
				});
			} else {
				// 需要获取到商品id 和购买数量 单价
				const arr = this.payList.map(item => {
					return { goods_id: item.goods_id, goods_number: item.num, goods_price: item.goods_price };
				});
				// 发起请求  需要先把订单号获取到
				const [error, res] = await uni.request({
					url: 'https://api-hmugo-web.itheima.net/api/public/v1/my/orders/create',
					method: 'post',
					header: {
						Authorization: token
					},
					data: {
						order_price: this.totalPrice,
						consignee_addr: this.address,
						goods: arr
					}
				});
				// 获取支付
				const [payError, payRes] = await uni.request({
					url: 'https://api-hmugo-web.itheima.net/api/public/v1/my/orders/req_unifiedorder',
					method: 'post',
					header: {
						Authorization: token
					},
					data: {
						order_number: res.data.message.order_number
					}
				});
				// 判断 如果预付订单成功就生成二维码支付
				if (payRes.data.meta.status === 200) {
					// 生成订单 uni-app 内置的api
					const [reqErr, reqRes] = await uni.requestPayment(payRes.data.message.pay);
					console.log(reqErr, reqRes);
					if (!reqErr) {
						uni.showToast({
							title: '支付成功',
							inon: 'none'
						});
						// 删除已购买的商品
						// 如果支付成功就跳转到订单页
						uni.redirectTo({
							url: '/pages/order/index'
						});
						this.clearPaymentProduct()
					}
				}
			}
		},

		// 清除已经结算的商品
		async clearPaymentProduct() {
		    // 删除已经结算的商品
		    // 结算的商品列表 this.cart
		    // 本地缓存的购物车 uni.getStorage('cart')
		    // 把本地缓存的购物车删除已经结算的商品
		    const [err, originCart] = await uni.getStorage({
		        key: 'cart'
		    })
		    const notPayCart = originCart.data.filter(item => {
		        return !item.checked;
		    })
		    uni.setStorage({
		        key: 'cart',
		        data: notPayCart
		    })
		},
		// 选择地址
		select() {
			// 获取用户地址;
			uni.chooseAddress({
				success(res) {
					uni.setStorage({
						key: 'address',
						data: res
					});
				}
			});
		}
	}
};
</script>

<style lang="less">
page {
	margin-bottom: 82rpx;
	background-color: rgba(0, 0, 0, 0.1);
	.order {
		.address {
			height: 187rpx;
			background-color: #fff;
			padding: 40rpx;
			box-sizing: border-box;
			.address_title {
				margin-bottom: 18rpx;
				color: #434343;
				font-size: 30rpx;
			}
			text {
				margin-right: 20rpx;
				font-size: 24rpx;
			}
		}
		.site {
			height: 187rpx;
			background-color: #fff;
			padding: 20rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			.site_title {
				position: relative;
				height: 89rpx;
				width: 303rpx;
				border: 3rpx solid #ea4350;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #ea4350;
				border-radius: 44rpx;
				font-weight: 600;
			}
		}
		.goods {
			height: 80rpx;
			margin-top: 20rpx;
			background-color: #fff;
			display: flex;
			align-items: center;
			font-size: 24rpx;
			padding-left: 35rpx;
		}
		.list {
			height: 209rpx;
			padding: 9rpx 0;
			padding: 0 35rpx;
			display: flex;
			background: #fff;
			.left {
				image {
					width: 191rpx;
					height: 191rpx;
				}
			}
			.right {
				margin-left: 29rpx;
				font-size: 24rpx;
				.top {
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
					margin: 26rpx 0;
				}
				.buttom {
					display: flex;
					justify-content: space-between;
					.price {
						color: #ea4350;
					}
					.num {
					}
				}
			}
		}
	}
	.total {
		display: flex;
		position: fixed;
		bottom: 0;
		left: 0;
		height: 82rpx;
		width: 750rpx;
		align-items: center;
		justify-content: space-between;
		padding: 0 28rpx;
		box-sizing: border-box;
		font-size: 24rpx;
		background: #fff;
		.price {
			color: #ea4350;
		}
		.pay {
			color: #fff;
			background-color: #b6b6b6;
			height: 52rpx;
			width: 150rpx;
			border-radius: 26rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.active {
			background-color: #ea4350;
		}
	}
}
</style>
